<template>
  <div class="cart">
    <van-nav-bar
      title="购物车"
      :left-text="isEit?'编辑':'完成'"
      @click-left="onClickLeft"
    />
    <div class="scroll">
        <img src="../../assets/img/dp.png" alt="">
        <h5>猜你喜欢</h5>
        <section class="scr-ct">
          <people-cart v-for="(item,index) in showList" :key="index" :itemObj="item" :sell="true"></people-cart>
        </section>
    </div>
  </div>
</template>

<script>
import { ref, reactive, toRefs } from "vue";
import { getGoods } from '../../api/home/home';
import peopleCart from '../../components/peopleCart.vue';
export default {
  components: { peopleCart },
  setup() {
    const isEit = ref(true);
    
    const data = reactive({
      showList:[], // 猜你喜欢展示的数据
    })

    getGoods().then(res => {
       // 取 0-10的随机数 
      //  console.log(ma);
      // Math.random(); 0-1 随机数
      // Math.random()*10; 0-10的随机数
      // splice 第一个参数变成随机数就行
      // data.showList 总的条数才28
      let num = res.data.length - 4; // 得到的结果就是随机数的最大取值范围
      let ren = parseInt(Math.random()*num); // 获取0-24的随机整数
       data.showList = res.data.splice(ren,4);
    })
    const onClickLeft = () => { // 编辑和完成按钮的切换事件
       isEit.value = !isEit.value
    }
    return{
      onClickLeft,
      isEit,
      ...toRefs(data)
    }
  },
};
</script>
<style lang="scss" scoped>
// scoped 会随机生成一串id避免样式的污染

// 在vue2 里面 /deep/ 在vue3 :deep()
:deep(.van-nav-bar__text){
  color:red;
}
// p{
//   color: red;
// }
.scroll{
  height: calc(100% - 46px);
  overflow: auto;
  background: #fff;
  img{
    width: 100%;
  }
  h5{
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 15px;
  }
  .scr-ct{
    display: flex;
    flex-wrap: wrap;
    padding:0 10px;
    justify-content: space-between;
  }
}
</style>